<template>
  <div id="add_menu_app">
    <el-dialog title="新增菜单" :visible.sync="isShow.flag" width="50%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rouls">
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option :label="'顶级菜单'" :value="0">顶级菜单</el-option>
            <el-option :label="m.title" :value="m.id" v-for="m in menuList" :key="m.pid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.type">
            <el-radio :label='1' :disabled="form.pid!=='0'?true:false">目录</el-radio>
            <el-radio :label='2' >菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" v-if="form.type==='2'">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" v-if="form.type==='1'">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-radio-group v-model="form.status" prop="status">
            <el-radio :label='1'>正常</el-radio>
            <el-radio :label='2'>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow","menuList"],
  data() {
    return {
         form: {
          id: 0, 
          pid: '',
          type: 1,
          title: '',
          url: '',
          icon: "",
          status: 1
        },
        rouls:{
           title: {required: true, message: "菜单名称不可以为空",trigger: 'blur'}, 
           status: {required: true, message: "菜单状态不可以为空",trigger: 'change'}
        }
    };
  },
   methods: {
      onSubmit() {
        //提交数据
        var url=""
        if(this.form.id>0){
          url = "/menuedit"
        }else{
           url = "/menuadd"
        }
        console.log(url)
        const post_data = {...this.form};
        this.$axios.post(url,post_data).then(res=>{
            console.log(res)
        })
        //置空表单
        this.form = {
          id: 0,
          pid: '',
          type: '',
          title: '',
          url: '',
          icon: "",
          status: ""
        }
        //关闭表单
        this.isShow.flag = false
      },
      setData(obj){
        this.form = {...obj}
      }
  }
};
</script>

<style>
</style>